.index{
    width: 100%;
    width: 100%;
    display: flex;
}

.rbox{
    flex: 1;
}

.navBar {
  width: 100px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 50px;
}

.navBarItem {
  width: 100px;
  height: 100px;
  margin: 10px 0px;
  display: flex;
  position: relative;
  transform: translateX(-50px) rotateZ(0deg);
  transition: all 0.4s;
  align-items: center;
  justify-content: center;
  color: rgb(219, 222, 225);
}

.navBarItem:hover{
    transform: translateY(15px) rotateZ(180deg) scale(1.3);
    margin: 30px 10px;
    cursor: pointer;
}

.navBarItem:hover .textbox{
    transform: rotateZ(180deg);
}

.navBarItem::before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background-color: rgba(30, 29, 29, 0.5);
  background-repeat: no-repeat;
  box-shadow: inset -5px 5px 8px 0px rgb(255 255 255 / 20%),
    inset -30px 15px 20px -10px rgb(255 255 255 / 20%),
    inset -10px 10px 30px 5px rgb(255 255 255 / 20%),
    inset -10px 10px 10px -5px rgb(255 255 255 / 20%),
    inset 12px -20px 5px -21px rgb(255 255 255 / 80%),
    inset 10px -30px 20px -20px rgb(255 255 255 / 50%),
    inset 50px -50px 20px -10px rgb(108 108 108 / 15%);
}

.navBarItem::after {
  content: "";
  top: 14px;
  left: 55px;
  width: 20px;
  height: 27px;
  border-radius: 40px 0 0 0 / 15px 0 0 0;
  position: absolute;
  transform: perspective(100px) scaleY(0.5) rotateX(-5deg) rotateY(-15deg)
    rotateZ(130deg);
  background-color: white;
  background-image: linear-gradient(
      to right,
      transparent 20%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      transparent 70%,
      rgba(0, 0, 0, 0.4) 80%,
      rgba(0, 0, 0, 0.4) 80%,
      transparent 90%
    );
  filter: blur(0.5px);
}

@media only screen and (max-width: 800px) {
  .navBarItem {
    transform: scale(0.5) translate(-140%, 0%) rotateZ(0deg);
  }
}
